<template>
  <div class="my-reservations">
    <h2>我的预定</h2>
    
    <div class="filter-tabs">
      <button 
        v-for="status in statusFilters" 
        :key="status.value"
        @click="currentFilter = status.value"
        :class="{ active: currentFilter === status.value }"
        class="filter-tab"
      >
        {{ status.label }}
        <span v-if="getCountByStatus(status.value) > 0" class="count-badge">
          {{ getCountByStatus(status.value) }}
        </span>
      </button>
    </div>
    
    <div v-if="filteredReservations.length === 0" class="empty-state">
      <div class="empty-icon">📋</div>
      <h3>暂无预定记录</h3>
      <p>{{ getEmptyMessage() }}</p>
      <button @click="$emit('go-to-products')" class="go-shopping-btn">
        去预定商品
      </button>
    </div>
    
    <div v-else class="reservations-list">
      <div 
        v-for="reservation in filteredReservations" 
        :key="reservation.id"
        class="reservation-card"
        :class="`status-${reservation.status}`"
      >
        <div class="reservation-header">
          <div class="reservation-id">
            预定编号: {{ formatReservationId(reservation.id) }}
          </div>
          <div class="reservation-status">
            <span :class="`status-badge status-${reservation.status}`">
              {{ getStatusText(reservation.status) }}
            </span>
          </div>
        </div>
        
        <div class="reservation-content">
          <div class="product-info">
            <img :src="reservation.productImage" :alt="reservation.productName" class="product-image" />
            <div class="product-details">
              <h4>{{ reservation.productName }}</h4>
              <p class="price">单价: ¥{{ reservation.productPrice.toFixed(2) }}</p>
              <p class="quantity">数量: {{ reservation.quantity }}</p>
              <p class="total">总额: ¥{{ reservation.totalAmount.toFixed(2) }}</p>
            </div>
          </div>
          
          <div class="user-info">
            <h5>联系信息</h5>
            <p><strong>姓名:</strong> {{ reservation.contactName }}</p>
            <p><strong>电话:</strong> {{ reservation.contactPhone }}</p>
            <p><strong>地址:</strong> {{ reservation.contactAddress }}</p>
            <p v-if="reservation.notes">
              <strong>备注:</strong> {{ reservation.notes }}
            </p>
          </div>
        </div>
        
        <div class="reservation-footer">
          <div class="time-info">
            <p class="created-time">
              预定时间: {{ formatTime(reservation.createdAt) }}
            </p>
            <p v-if="reservation.updatedAt !== reservation.createdAt" class="updated-time">
              更新时间: {{ formatTime(reservation.updatedAt) }}
            </p>
          </div>
          
          <div class="actions">
            <button 
              v-if="reservation.status === 'pending'"
              @click="confirmReservation(reservation.id)"
              class="action-btn confirm-btn"
            >
              确认预定
            </button>
            
            <button 
              v-if="reservation.status === 'pending' || reservation.status === 'confirmed'"
              @click="cancelReservation(reservation.id)"
              class="action-btn cancel-btn"
            >
              取消预定
            </button>
            
            <button 
              v-if="reservation.status === 'confirmed'"
              @click="completeReservation(reservation.id)"
              class="action-btn complete-btn"
            >
              标记完成
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { RESERVATION_STATUS } from '../store/index.js'

const props = defineProps(['reservations'])
const emit = defineEmits(['confirm-reservation', 'cancel-reservation', 'complete-reservation', 'go-to-products'])

const currentFilter = ref('all')

const statusFilters = [
  { value: 'all', label: '全部' },
  { value: RESERVATION_STATUS.PENDING, label: '待确认' },
  { value: RESERVATION_STATUS.CONFIRMED, label: '已确认' },
  { value: RESERVATION_STATUS.COMPLETED, label: '已完成' },
  { value: RESERVATION_STATUS.CANCELLED, label: '已取消' }
]

const filteredReservations = computed(() => {
  console.log(props)
  if (currentFilter.value === 'all') {
    return props.reservations
  }
  return props.reservations.filter(r => r.status === currentFilter.value)
})

const getCountByStatus = (status) => {
  if (status === 'all') {
    return props.reservations.length
  }
  return props.reservations.filter(r => r.status === status).length
}

const getEmptyMessage = () => {
  switch (currentFilter.value) {
    case RESERVATION_STATUS.PENDING:
      return '暂无待确认的预定'
    case RESERVATION_STATUS.CONFIRMED:
      return '暂无已确认的预定'
    case RESERVATION_STATUS.COMPLETED:
      return '暂无已完成的预定'
    case RESERVATION_STATUS.CANCELLED:
      return '暂无已取消的预定'
    default:
      return '您还没有任何预定记录，快去预定心仪的商品吧！'
  }
}

const getStatusText = (status) => {
  switch (status) {
    case RESERVATION_STATUS.PENDING:
      return '待确认'
    case RESERVATION_STATUS.CONFIRMED:
      return '已确认'
    case RESERVATION_STATUS.COMPLETED:
      return '已完成'
    case RESERVATION_STATUS.CANCELLED:
      return '已取消'
    default:
      return '未知状态'
  }
}

const formatReservationId = (id) => {
  return String(id).slice(-8).toUpperCase()
}

const formatTime = (timeString) => {
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const confirmReservation = (id) => {
  emit('confirm-reservation', id)
}

const cancelReservation = (id) => {
  if (confirm('确定要取消这个预定吗？取消后库存将会释放。')) {
    emit('cancel-reservation', id)
  }
}

const completeReservation = (id) => {
  if (confirm('确定要标记这个预定为已完成吗？')) {
    emit('complete-reservation', id)
  }
}
</script>

<style scoped>
.my-reservations {
  max-width: 1000px;
  margin: 0 auto;
}

.my-reservations h2 {
  margin-bottom: 1.5rem;
  color: #333;
}

.filter-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.filter-tab {
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: #666;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.filter-tab:hover {
  color: #007bff;
}

.filter-tab.active {
  color: #007bff;
  border-bottom-color: #007bff;
}

.count-badge {
  background: #007bff;
  color: white;
  border-radius: 12px;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  min-width: 20px;
  text-align: center;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #666;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.empty-state h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.go-shopping-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
}

.reservations-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reservation-card {
  border: 1px solid #dee2e6;
  border-radius: 12px;
  background: white;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reservation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.reservation-id {
  font-weight: bold;
  color: #333;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}

.status-badge.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.status-confirmed {
  background: #d4edda;
  color: #155724;
}

.status-badge.status-completed {
  background: #cce5ff;
  color: #004085;
}

.status-badge.status-cancelled {
  background: #f8d7da;
  color: #721c24;
}

.reservation-content {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.product-info {
  display: flex;
  gap: 1rem;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.product-details h4 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.product-details p {
  margin: 0.25rem 0;
  color: #666;
}

.product-details .price {
  color: #e74c3c;
  font-weight: bold;
}

.product-details .total {
  color: #007bff;
  font-weight: bold;
}

.user-info h5 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.user-info p {
  margin: 0.25rem 0;
  color: #666;
  font-size: 0.9rem;
}

.reservation-footer {
  padding: 1rem;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.time-info p {
  margin: 0.25rem 0;
  font-size: 0.8rem;
  color: #666;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.confirm-btn {
  background: #28a745;
  color: white;
}

.confirm-btn:hover {
  background: #218838;
}

.cancel-btn {
  background: #dc3545;
  color: white;
}

.cancel-btn:hover {
  background: #c82333;
}

.complete-btn {
  background: #007bff;
  color: white;
}

.complete-btn:hover {
  background: #0056b3;
}

@media (max-width: 768px) {
  .reservation-content {
    grid-template-columns: 1fr;
  }
  
  .reservation-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .actions {
    justify-content: center;
  }
}
</style>
